<!-- 准考证管理 -->
<template>
  <div class="courseBox">
    <div class="courseBoxTop">
      <div class="courseBoxTopSearch">
        <div class="courseName">
          <span>考试期次：</span>
          <el-input v-model="search.examPeriod" placeholder="请输入考试期次" />
        </div>

        <div class="courseName">
          <span>考试名称：</span>
          <el-input v-model="search.examPaper" placeholder="请输入考试名称" />
        </div>

        <div class="searchAndReset">
          <el-button class="searchBtn" @click="searchInput">
            <i class="el-icon-search"></i>
            <span>搜索</span>
          </el-button>
          <el-button class="resetBtn" @click="refreshInput">
            <i class="el-icon-refresh"></i>
            <span>重置</span>
          </el-button>
        </div>
      </div>
    </div>

    <!-- 管理列表 -->
    <div class="courseBoxBottom">
      <div class="bottomHeader">
        <span class="title">管理列表</span>
        <div class="bottomHeaderBtn">
          <!-- <el-button class="printBtn" @click="goSetExamAttend">
            <span>批量打印</span>
          </el-button> -->
        </div>
      </div>

      <!-- 表格 -->
      <div class="bottomMian">
        <el-table
          :cell-style="{ padding: '5px' }"
          empty-text="暂无数据"
          ref="multipleTable"
          border
          :data="list"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50"
          ></el-table-column>
          <el-table-column prop="examPeriod" label="考试期次">
          </el-table-column>
          <el-table-column prop="examPaper" label="考试名称"></el-table-column>
          <el-table-column
            prop="examTime"
            label="考试时间"
            min-width="150"
          ></el-table-column>
          <el-table-column
            prop="studentNumber"
            label="考生人数"
          ></el-table-column>
          <el-table-column prop="action" label="操作">
            <template slot-scope="scope">
              <!-- <img src="@/assets/edit.png" alt="" class="editImg" />
              <img src="@/assets/del.png" alt="" class="delImg" /> -->
              <el-button
                type="text"
                @click="goSetExamAttendanceDocket(scope.row)"
                >预览</el-button
              >
              <el-button type="text" @click="printSet(scope.row)"
                >打印</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <!-- <div class="pagination" v-if="list.length > 0">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            prev-text="上一页"
            next-text="下一页"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
          <div class="pagination">
            跳到第
            <input type="text" ref="currentPage" value="1" />
            页
          </div>
          <button class="submit" @click="goPage">确定</button>
        </div> -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getExaminationListApi } from "@/api/testManagement/Examination.js";
import "@/styles/picture.scss";

export default {
  data() {
    return {
      isMask: false,
      search: {
        examPeriod: "", // 考试期次
        examPaper: "", // 考试名称
      },
      multipleSelection: [], // 批量选择
      total: 0, // 总条数
      queryParams: {
        pageNum: 1, // 当前页面
        pageSize: 10, // 每页显示条数
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      isEdit: false,
      filename: "课程管理表",
      list: [],
    };
  },
  created() {
    this.courseList();
  },
  mounted() {},

  methods: {
    //  获取课程列表
    getCourseList() {},
    async courseList(row) {
      const res = await getExaminationListApi(row);
      console.log(res, "res");
      this.list = res.rows;
      this.total = res.total;
    },
    // 搜索
    async searchInput() {
      const res = await getExaminationListApi({
        ...this.search,
        ...this.queryParams,
      });
      console.log(res, "search");
      this.list = res.rows
      this.total = res.total;
    },

    // 重置
    refreshInput() {
      this.search = {}
      this.courseList()
    },

    // 选择 / 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val, "val");
    },

    // 更改当前页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryParams.pageNum = val;
      this.courseList(this.queryParams);
    },

    // 跳转准考证预览

    goSetExamAttendanceDocket(row) {
      console.log(row);
      this.$router.push({
        path: `/testManagement/setExamAttendanceDocket/${row.examId}`,
      });
    },
    goSetExamAttend() {
      this.$message.error("暂不能使用");
      // this.$router.push({
      //   name: "ExamAttendanceDocketprint",
      //   params: {
      //     id: this.multipleSelection,
      //   },
      // });
    },

    // 点击打印准考证跳转
    printSet(row) {
      this.$router.push({
        name: "ExamAttendanceDocketprint",
        params: {
          id: row.examId,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.courseBoxTopSearch {
  ::v-deep .el-input__inner {
    height: 36px;
    line-height: 36px;
  }
}
.action {
  cursor: pointer;

  span {
    font-size: 12px;
    color: #4b93d5;
  }
}
</style>